<template>
  <div>
    <h1 class="text">前端基础框架开发文档地址：</h1>
    <a href="http://10.44.52.201:9003" class="link">http://10.44.52.201:9003</a>
    <div>
      <strong class="title">me-base-frame-vite</strong>
      <div class="desc">致力于打造基于公司业务的前端基础框架，统一前端技术规范，帮助开发者能更高效的完成开发工作。</div>
    </div>
    <a-radio-group :options="radios" option-type="button" v-model:value="appType" @change="onChange"></a-radio-group>
  </div>
</template>

<script lang='ts' setup>
import type { RadioChangeEvent } from 'ant-design-vue';
import { ref } from 'vue';
import { useConfigStore } from '@/stores/configs/config';
defineOptions({
  name : 'workbench'
});
const configStore = useConfigStore();
const appType = ref(configStore.config.app.type || 'admin');
const radios = ref([
  {label : '普通应用' , value : 'normal'},
  {label : '后台管理系统应用' , value : 'admin'}
]);
const onChange = (evt: RadioChangeEvent) => {
  const type = evt.target.value;
  configStore.updateConfig({
    app : {
      type : type
    }
  })
};
</script>

<style lang='less' scoped>
.text {
  .useTheme({
    color: text-color;
  })
}
.link {
  .useTheme({
    color: primary-color;
  });
}
.title {
  font-size: var(--font-size-larger);
  font-weight: 500;
  .desc {
    font-size: var(--font-size-base);
    .useTheme({
      color: text-color-desc;
    })
  }
}
</style>